import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    TextInput,
    TouchableOpacity,
} from 'react-native';

import LinearGradient from 'react-native-linear-gradient';

var {width,height} = Dimensions.get('window');

export default class campusMain extends Component {
    constructor(props){
        super(props);
        this.state ={
            notice:'获取验证码',
            timenumber:60,
            lock:false
        };
        this.changeNumber = this.changeNumber.bind(this);
    }
    // 点击倒计时
    changeNumber(){
        if(this.state.lock) return;
        this.setState({notice: '60s'})
        this.interval =  setInterval(()=>{
            const timer = --this.state.timenumber ;
            if(timer === 0){
                this.interval && clearInterval(this.interval);
                this.setState({
                    notice:'获取验证码',
                    lock:false,
                    timenumber:60
                })
            }else {
                this.setState({notice: timer +'s',lock:true})
            }
        },1000);
    }
    // componentDidMount(){
    //     const { navigate } = this.props.navigation;
    // onPress={()=>this.props.navigation.navigate('Protocol')}
    // }
    render() {

        return (
            <LinearGradient colors={['#05befe', '#4481eb']} style={styles.container}>
                <View>
                    <Image source={require('../../img/logo.png')} style={styles.imglogo}/>
                    <View style={styles.fillinfo}>
                        <View style={styles.tel}>
                            <Image source={require('../../img/telicon.png')} style={styles.telimg}/>
                            <TextInput
                                underlineColorAndroid='transparent'
                                keyboardType="numeric"
                                placeholderTextColor="#cfe4fb"
                                placeholder="请输入您的手机号码"
                                style={styles.teltextinput}/>
                        </View>
                        <View style={styles.codecon}>
                            <View style={styles.codeandimg}>
                                <Image source={require('../../img/code.png')} style={styles.telimg}/>
                                <TextInput
                                    underlineColorAndroid='transparent'
                                    keyboardType="numeric"
                                    placeholderTextColor="#cfe4fb"
                                    placeholder="请输入验证码"
                                    style={styles.codetextinput}/>
                            </View>
                            <TouchableOpacity style={styles.code} onPress={this.changeNumber}>
                                <Text style={styles.textcode}>{this.state.notice}</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.loginbtn}>
                            <Text style={styles.logintext}>立即登陆</Text>
                        </View>
                        <View>
                            <Text style={styles.loginagree}>登陆表示您同意《用户协议》</Text>
                        </View>
                        <View style={styles.login}>
                            <View style={styles.loginround}>
                                <View style={styles.roundfirst}></View>
                                <View style={styles.roundsecond}></View>
                                <View style={styles.roundthird}></View>
                            </View>
                            <Text style={styles.loginwechat}>第三方登陆</Text>
                            <View style={styles.loginround}>
                                <View style={styles.roundthird}></View>
                                <View style={styles.roundsecond}></View>
                                <View style={styles.roundfirst}></View>
                            </View>
                        </View>
                        <Image style={styles.wechat} source={require('../../img/wechat.png')}/>
                    </View>
                </View>
            </LinearGradient>
        );
    }
    componentWillUnmount(){
        clearInterval(this.interval)
    }
}




const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    imglogo:{
        width:width,
        height:width * 296 / 750,
        marginTop:height * 0.09,
        marginBottom:height * 0.04,
    },
    fillinfo:{
        marginLeft:width * 0.06,
        marginRight:width * 0.06,
    },
    tel:{
        paddingLeft:10,
        paddingRight:10,
        width:width * 0.88,
        height:50,
        borderWidth:1,
        borderColor:'#00eaff',
        borderRadius:25,
        marginBottom:27,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'flex-start',
        backgroundColor:'#279bf0'
    },
    codecon:{
        paddingLeft:10,
        paddingRight:10,
        width:width * 0.88,
        height:50,
        borderWidth:1,
        borderColor:'#00eaff',
        borderRadius:25,
        marginBottom:27,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        backgroundColor:'#279bf0'
    },
    codeandimg:{
        flexDirection:'row',
        justifyContent:'flex-start',
    },
    telimg:{
        width:37,
        height:37,
    },
    teltextinput:{
        width:140,
        height:37,
        color:'#ffffff',
        fontSize:14,
        marginLeft:15,
    },
    codetextinput:{
        width:110,
        height:37,
        color:'#ffffff',
        fontSize:14,
        marginLeft:15,
    },
    code:{
        width:100,
        height:37,
        borderRadius:18,
        justifyContent:'center',
        borderWidth:0.5,
        borderColor:'#2bbcfc',
    },
    textcode:{
        fontSize:14,
        textAlign:'center',
        color:'#fff',
    },
    loginbtn:{
        width:width * 0.88,
        height:50,
        backgroundColor:'#fff',
        borderRadius:25,
        justifyContent:'center'
    },
    logintext:{
        textAlign:"center",
        fontSize:17,
        fontWeight:'bold',
        color:'#259df4'
    },
    loginagree:{
        fontSize:10,
        textAlign:'right',
        color:'#fff',
        marginTop:13,
        marginBottom:height * 0.08
    },
    roundfirst:{
        width:3,
        height:3,
        borderRadius:1.5,
        backgroundColor:'#fff'
    },
    roundsecond:{
        width:4,
        height:4,
        borderRadius:2,
        backgroundColor:'#fff',
        marginLeft:10,
        marginRight:10,
    },
    roundthird:{
        width:5,
        height:5,
        borderRadius:2.5,
        backgroundColor:'#fff',
    },
    loginwechat:{
        fontSize:17,
        color:'#fff',
        marginLeft:16,
        marginRight:16,
    },
    login:{
        flexDirection:'row',
        justifyContent:'center',
        marginBottom:27
    },
    loginround:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
    },
    wechat:{
        width:27,
        height:22,
        alignSelf:'center'
    }
});